<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Freude Xu
 * @LastEditTime: 2021-09-23 19:43:31
-->
<template>
  <div ref="root" style="height: 150px"></div>
</template>

<script>
  import {
    DualAxes
  } from "@antv/g2plot";
  export default {
    data() {
      return {};
    },
    mounted() {
      this.initCharts();
    },
    methods: {
      initCharts() {
        const data = [
  { year: '1991', value: 3, count: 10 },
  { year: '1992', value: 4, count: 4 },
  { year: '1993', value: 3.5, count: 5 },
  { year: '1994', value: 5, count: 5 },
  { year: '1995', value: 4.9, count: 4.9 },
  { year: '1996', value: 6, count: 35 },
  { year: '1997', value: 7, count: 7 },
  { year: '1998', value: 9, count: 1 },
  { year: '1999', value: 13, count: 20 },
];
        let dualAxes = new DualAxes(this.$refs['root'], {
          data: [data,data],
          xField: 'year',
          yField: ['value', 'count'],
          geometryOptions: [{
              geometry: 'line',
              color: '#5B8FF9',
            },
            {
              geometry: 'line',
              color: '#5AD8A6',
            },
          ],
          tooltip: {
          fields: ["ratio", "value"],
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontSize: "16px",
              lineHeight: "2em",
              fontFamily: "TencentSans",
            },
          },
        },
        });
        dualAxes.render();
      }
    }
  }
</script>